<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!--访问该页面时，在此处生成CSRF令牌。当发起异步请求时，会携带此处的数据-->
<!--	<meta name="_csrf_header" th:content="${_csrf.headerName}">-->
<!--	<meta name="_csrf" th:content="${_csrf.token}">-->

	<link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
	<link rel="stylesheet" th:href="@{/css/global.css}" />
	<title>首页</title>
</head>
<body>	
	<div class="nk-container">
		<!-- 头部 -->
		<header class="bg-dark sticky-top" th:fragment="header">
			<div class="container">
				<!-- 导航 -->
				<nav class="navbar navbar-expand-lg navbar-dark">
					<!-- logo -->
					<img th:src="@{/img/bbs.png}" height="37px" style="margin: 8px 10px 8px 20px">
					<span style="font-family: 微软雅黑;font-style: oblique; font-weight: bold;color: white;font-size: 30px;padding-right: 30px">CDC</span>
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<!-- 功能 -->
					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav mr-auto">
							<li class="nav-item ml-3 btn-group-vertical">
								<a class="nav-link" th:href="@{/index}">首页</a>
							</li>
							<li th:if="${loginUser!=null}" class="nav-item ml-3 btn-group-vertical">
								<a class="nav-link position-relative" th:href="@{/message/list}">消息<span class="badge badge-danger" th:if="${unreadTotal!=0}" th:text="${unreadTotal}">12</span></a>
							</li>
							<li th:if="${loginUser==null}" class="nav-item ml-3 btn-group-vertical">
								<a class="nav-link" th:href="@{/register}">注册</a>
							</li>
							<li th:if="${loginUser==null}" class="nav-item ml-3 btn-group-vertical">
								<a class="nav-link" th:href="@{/loginPage}">登录</a>
							</li>
							<li th:if="${loginUser!=null&&loginUser.type==2}" class="nav-item ml-3 btn-group-vertical">
								<a class="nav-link" th:href="@{/admin/index}">管理</a>
							</li>
							<li th:if="${loginUser!=null}" class="nav-item ml-3 btn-group-vertical dropdown">
								<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									<img th:src="${loginUser.headerUrl}" class="rounded-circle" style="width:30px;height: 30px"/>
								</a>
								<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="border-radius: 10px;">
									<a class="dropdown-item text-center" style="font-weight: lighter" th:href="@{|/user/profile/${loginUser.id}|}"><img class="up" th:src="@{/img/home.png}"> &nbsp;个人主页</a>
									<a class="dropdown-item text-center" style="font-weight: lighter" th:href="@{/user/setting}"><img class="up" th:src="@{/img/set.png}"> &nbsp;账号设置</a>
									<a class="dropdown-item text-center" style="font-weight: lighter" th:href="@{/file/myFile}"><img class="up" th:src="@{/img/myfile.png}"> &nbsp;我的文件</a>
									<form th:action="@{/logout}" method="post">
										<a class="dropdown-item text-center" style="font-weight: lighter" href="javascript:document.forms[0].submit();"><img class="up" th:src="@{/img/logout.png}"> &nbsp;退出</a>
									</form>
								</div>
							</li>
						</ul>
						<!-- 搜索 -->
						<form class="form-inline my-2 my-lg-0" th:action="@{/search}" method="get" onsubmit="return searchCheck()">
							<input id="keyword" class="form-control mr-sm-2 rounded-pill right" th:value="${keyword}" name="keyword" type="search" aria-label="Search"/>
							<button class="btn my-2 my-sm-0" type="submit"><img th:src="@{/img/search.png}" width="25px" height="25px"></button>
						</form>
					</div>
				</nav>
			</div>
		</header>

		<!-- 内容 -->
		<div class="main">
			<div class="container">
				<div class="position-relative">
					<!-- 筛选条件 -->
					<ul class="nav nav-tabs mb-3">
						<li class="nav-item">
							<a th:class="|nav-link ${orderMode==0?'active':''}|" th:href="@{/index}">最新 <img th:src="@{/img/new.png}"></a>
						</li>
						<li class="nav-item">
							<a th:class="|nav-link ${orderMode==0?'':'active'}|" th:href="@{/index(orderMode=1)}">热门 <img th:src="@{/img/hot.png}"></a>
						</li>
					</ul>
					<a th:if="${loginUser!=null}" th:href="@{/discuss/toAdd}" class="btn btn-primary btn-sm position-absolute rt-0" >我要发布</a>
				</div>
				<!-- 帖子列表 -->

				<div th:if="${discussPosts.size()==0}" style="padding-top: 50px;padding-bottom: 50px;text-align: center">
					<span class="text-muted font-size-14" style="font-weight: lighter">空空如也~</span><br/>
					<img th:src="@{/img/nothing.png}" >
				</div>

				<ul class="list-unstyled">
					<li class="media pb-3 pt-3 mb-3 border-bottom" th:each="map:${discussPosts}">
						<a th:href="@{|/user/profile/${map.user.id}|}">
							<img th:src="${map.user.headerUrl}" class="mr-4 rounded-circle" alt="用户头像" style="width:50px;height:50px;">
						</a>
						<div class="media-body" style="padding: 0px 10px">
							<h6 class="mt-0 mb-3">
								<a style="font-weight: bold" th:href="@{|/discuss/detail/${map.post.id}|}" th:utext="${#strings.length(map.post.title)>30?#strings.substring(map.post.title,0,30)+'...':map.post.title}"></a>
								<span class="badge badge-secondary bg-primary" th:if="${map.post.type==1}">置顶</span>
								<span class="badge badge-secondary bg-danger" th:if="${map.post.status==1}">精华</span>
								<div  class="font-size-16" style="font-weight: lighter;color: #3e3e3e;margin-top: 10px;" th:utext="${#strings.length(map.post.content)>120?#strings.substring(map.post.content,0,120)+'...':map.post.content}">

								</div>
							</h6>
							<div class="text-muted font-size-12">
								<u class="mr-3" style="font-weight: bold" th:text="${map.user.username}">寒江雪</u> 发布于 <b th:text="${#dates.format(map.post.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</b>
								<ul class="d-inline float-right">
									<li class="d-inline ml-2"><img th:src="@{/img/like.png}" width="18px" height="20px" class="up"> [[${map.likeCount}]]</li>
									<li class="d-inline ml-2">|</li>
									<li class="d-inline ml-2"><img th:src="@{/img/comment.png}" width="20px" height="20px" class="up"> [[${map.post.commentCount}]]</li>
								</ul>
							</div>
						</div>						
					</li>
				</ul>
				<!-- 分页 -->
				<nav class="mt-5" th:if="${page.total>1}" th:fragment="page">
					<ul class="pagination justify-content-center">
						<li th:class="|page-item ${page.current==1?'disabled':''}|">
							<a class="page-link" th:href="@{${page.path}(current=1)}">首页</a>
						</li>
						<li th:class="|page-item ${page.current==1?'disabled':''}|">
							<a class="page-link" th:href="@{${page.path}(current=${page.current-1})}">上一页</a>
						</li>
						<li th:class="|page-item ${page.current==i?'active':''}|" th:each="i:${#numbers.sequence(page.from,page.to)}">
							<a class="page-link" th:href="@{${page.path}(current=${i})}" th:text="${i}">1</a>
						</li>

						<li th:class="|page-item ${page.current==page.total?'disabled':''}|">
							<a class="page-link"  th:href="@{${page.path}(current=${page.current+1})}">下一页</a>
						</li>
						<li th:class="|page-item ${page.current==page.total?'disabled':''}|">
							<a class="page-link" th:href="@{${page.path}(current=${page.total})}">末页</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>

		<!-- 尾部 -->
		<footer class="bg-dark" th:fragment="footer">
			<div class="container">
				<div class="row">
					<!-- 二维码 -->
					<div class="col-4 qrcode">
						<img src="https://community-pictures.oss-cn-beijing.aliyuncs.com/yellow-duck.png" class="img-thumbnail" style="width:136px;" />
					</div>
					<!-- 信息 -->
					<div class="col-8 detail-info" style="padding-top: 30px">
						<div class="row">
							<div class="col-8">
								<ul class="nav btn-group-vertical company-info">
									<li class="nav-item text-white-50">
										欢迎大家来到CDC社区，请畅所欲言吧...
									</li>
								</ul>
							</div>
						</div>
						<div class="row">
							<div class="col">
								<ul class="nav">
									<li class="nav-item">
										<a class="nav-link text-light" href="https://zhiqian.site">友情链接</a>
									</li>
									<li class="nav-item">
										<a class="nav-link text-light" title="QQ:1270768450">意见反馈</a>
									</li>
									<li class="nav-item">
										<a class="nav-link text-light" title="QQ:1270768450">加入我们</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</footer>
	</div>

	<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
	<script th:src="@{/js/global.js}"></script>
</body>
</html>
